import React from "react";
import { Table, Button } from "antd";
import MenuCss from "../index.module.css";

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export default function TableList(props) {
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      width: 150,
    },
    {
      title: "Age",
      dataIndex: "age",
      width: 150,
    },
    {
      title: "Address",
      dataIndex: "address",
    },
    {
      title: "Action",
      key: "operation",
      fixed: "right",
      width: 100,
      render: data => (
        <Button type="link" onClick={updateData({ type: "update", data })}>
          action
        </Button>
      ),
    },
  ];
  const { changeModalState } = props;
  const updateData = data => {
    return () => {
      changeModalState(data);
    };
  };
  return (
    <Table
      className={MenuCss.menu_table}
      columns={columns}
      dataSource={data}
      pagination={{ pageSize: 50 }}
      scroll={{ y: 240 }}
    />
  );
}
